<template>
  <div class="nav-first-container">
    <div class="padding-b-57" id="addLog">
        <p class="log-type">日志类型</p>
        <div class="title-nav">
          <p :class="active==1?'normal-text normal-text_active':'normal-text'" 
          @click="typeCheck(1)">个人日志</p>
          <p :class="active==1?'normal-text':'normal-text normal-text_active'" 
           @click="typeCheck(2)">工作日志</p>
        </div>
        <van-cell-group class="margin-t-10">
          <van-field
            class="flex-column"
            label-class="left-class"
            v-model.trim="message"
            rows="3"
            autosize
            label="内容"
            type="textarea"
            placeholder="输入日志内容"
          />
        </van-cell-group>
        <van-cell-group class="margin-t-10" v-if="active==2">
          <van-field
            :border="false"
            disabled
          >
            <div slot="label">
              <span class="share-classs">共享人员</span> 
              <template v-if="attendanceValue.length > 0">
                <span class="label-right">{{attendanceValue.length}}人</span>
              </template>
            </div>
            <span v-if="attendanceValue.length > 0" slot="button" class="more-btn" @click="checkAll">查看全部</span>
          </van-field>
          <div class="tag-class">
            <van-row gutter="12">
              <van-col span="4" v-for="(atten, attenIndex) in attendanceValue"
              :key="attenIndex" v-if="attenIndex < 5">
              <template v-if="atten.pic == null">
                <img class="tag-img" src="../../assets/notification/head.png">
              </template>
              <template v-else>
                <img class="tag-img" :src="`${$common.filePath}${atten.pic}`">
              </template>
                <van-icon v-if="status != 'check'" class="delete-icon" name="clear" color="#F54B03" size="18px" @click="deleteIcon(atten,attenIndex)"/>
                <p class="tag-text  van-ellipsis">
                  {{atten.name}}
                </p>
              </van-col>
              <van-col>
                <div v-if="status != 'check'" class="add-btn" @click="addAttendance">+</div>
                <img v-else class="dot-class" src="../../assets/meeting/dot.png"/>
              </van-col>
            </van-row>
            
          </div>
        </van-cell-group>
      

      <div class="bottom-btn">
        <van-button class="btn-radius" type="info" size="large" @click="submits">马上提交</van-button>
      </div>

      <!-- 人员选择器 -->
      <van-popup v-model="showAttendance" position="bottom" :close-on-click-overlay="false"
      :safe-area-inset-bottom="true">
        <side-choose v-if="showAttendance" ref="sideChoose" :items="items" :default.sync="attendanceId" @changed="onlineChanged"
        titleText="选择共享人员" :maxHeight="showMoreSign?'69vh':'62vh'"></side-choose>
        <div class="bottom-btn-side">
          <!-- 收拢 -->
          <div v-if="changeTemp.length > 0 && !showMoreSign" class="padding-12 font-size14">
            <van-row>
              <van-col span="4" class="font-color6">已选：</van-col>
              <van-col span="18" class="font-color3">
                <van-col span="19" class="van-ellipsis">
                  <span v-for="(sign, index) in changeTemp" :key="'sign'+index" class="more-class">{{sign.name}}</span>
                </van-col>
                <van-col span="5">等<span style="color: #1A76FF">{{changeTemp.length}}</span>人</van-col>
              </van-col>
              <van-col span="2" class="align-right" @click="showMoreSign = true">
                <img src="../../assets/documents/triangle.png" width="10px" height="6px" />
              </van-col>
            </van-row>
          </div>
          <!-- 展开 -->
          <div v-if="changeTemp.length > 0 && showMoreSign" :class="showMoreSign?'classMoreSign padding-15 font-size14':'padding-15 font-size14'">
            <van-row type="flex" justify="space-between">
              <van-col span="4" class="font-color6">已选：</van-col>
              <van-col span="4" class="font-color6 align-right" @click="clearSign('read')">清空</van-col>
            </van-row>
            <van-row class="margin-t-15" style="display: flex;align-items: flex-end;">
              <van-col span="22">
                <span v-for="(sign, index) in changeTemp" :key="'more'+index" class="more-class">{{sign.name}}</span>
              </van-col>
              <van-col span="2" class="align-right" @click="showMoreSign = false">
                <img src="../../assets/documents/triangle_up.png" width="10px" height="6px" /></van-col>
            </van-row>
          </div>
          <van-row type="flex" justify="space-between">
            <van-col span="5">
              <div class="default-class" @click="cancelAttendance">取 消</div>
            </van-col>
            <van-col span="18">
              <div class="info-class" @click="confirmChose">确定</div>
            </van-col>
          </van-row>
        </div>
      </van-popup>
       <!-- 所有参会人员 -->
      <van-popup v-model="showAll" position="bottom" :close-on-click-overlay="false"
      :safe-area-inset-bottom="true" :close-on-popstate="true">
        <div class="full-container">
          <!-- <van-nav-bar title="共享人员" right-text="继续添加" left-arrow  @click-left="goBack"
          @click-right="attentToAdd"></van-nav-bar> -->
          <div class="alls">
            <p class="information">共{{attendanceValue.length}}人共享</p>
            <van-cell-group :border="false" v-for="(item,i) in attendanceValue" :key="i">
              <van-cell>
                <template slot="title">
                  <div class="flex-base">
                    <template v-if="item.pic == null">
                      <img class="tag-img" src="../../assets/notification/head.png">
                    </template>
                    <template v-else>
                      <img class="tag-img" :src="`${$common.filePath}${item.pic}`">
                    </template>
                    <van-icon class="pop_delete-icon" name="clear" color="#F54B03" size="18px" @click="deleteIcon(item,i)"/>
                    <span class="title-text ">
                      {{item.name}}
                    </span>
                  </div>
                </template>
                <template slot="default">
                  <div class="right-value">
                    <!-- <a><img class="custom-class" src="../../assets/meeting/message.png"></a> -->
                    <template v-if="item.phone != null">
                      <img class="custom-class" src="../../assets/meeting/tel.png" @click="phoneCall(item.phone)">
                    </template>
                  </div>
                </template>
              </van-cell>
            </van-cell-group>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
  
</template>
<script type="text/javascript">
  import sideChoose from '@/components/SideChoose.vue'
  export default {
    components: {
      'side-choose': sideChoose
    },
    data() {
      return {
        active: 1,
        status:"add",//add or edit or check
        editId:"",//编辑id
        items:[],
        message:"",
        showAttendance:false,
        attendanceId:[],
        attendanceValue:[],
        changeTemp:[],//复选框临时数组
        showAll:false,
        showMoreSign: false,         //显示更多人控制器
      }
    },
    activated() {
      this.editId = ""
      this.message = ""
      this.attendanceId = []
      this.attendanceValue = []

      this.$bridge.callHandler('navTitle', {title: '工作日志'})
      this.$bridge.callHandler('navBack')

      this.status = this.$route.query.status
      this.editId = this.$route.query.editId
      this.active = this.$route.query.active
      this.treeList()
      if(this.status == 'edit') {
        this.showDetail()
      }

      setTimeout(_ => {
        this.$bridge.registerHandler('navBackClicked', (data,responseCallback) => {
          this.$router.go(-1)
          responseCallback('go(-1)')
        })

        // 全屏下的 左按钮点击
        this.$bridge.registerHandler('fullScreenLeftClick',(data,responseCallback) => {
          this.$bridge.callHandler('cancelFullScreen',{title:'工作日志'})
          this.showAll = false
          responseCallback('leftclick')
        })
        // 全屏下的 右按钮点击
        this.$bridge.registerHandler('fullScreenRightClick',(data,responseCallback) => {
          this.$bridge.callHandler('cancelFullScreen',{title:'工作日志'})
          this.$bridge.callHandler('navKeepView')
          this.showAll = false
          this.showAttendance = true
          responseCallback('rightclick')
        })
      },500)
    },
    methods:{
      typeCheck(index) {
        this.active = index
      },
      /**
       * 树数据
       */
      treeList() {
        let config = {
          method: "post",
          url: `${this.$common.basePath}meeting.php`,
          data:{
            do: "department"
          }
        }
        this.$axios(config).then(res => {
          let treeData = this.$common.deepCopy(res.data)
          for (var i = 0; i < treeData.length; i++) {
            treeData[i].text = treeData[i].name
            for (var j = 0; j < treeData[i].children.length; j++) {
              (treeData[i].children)[j].text = (treeData[i].children)[j].name;
              (treeData[i].children)[j].choosed = false
            }
          }
          this.items = this.$common.deepCopy(treeData)
          console.log(this.items)
        }).catch(err => {
          console.log(err)
          this.$toast(err.msg)
        })
      },
      /**
       * 日志添加和修改提交
       * @return {[type]} [description]
       */
      submits() {
        if(this.message.trim() == '') {
          this.$toast("请正确输入内容")
        }else {
          this.$toast({
            duration: 0, // 持续展示 toast
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
          let attendanceName = []
          if (this.active == 2 && this.attendanceValue.length > 0) {
            attendanceName = this.attendanceValue.map((item,index) => {
              return item.name
            })
          }
          let config = {
            method: "post",
            url: `${this.$common.basePath}attendance.php`,
            data: {
              do: 'blogadd',
              user_id: this.$store.state.userId,
              type: this.active,
              content: this.message,
              user: attendanceName,
              id: this.editId || ''
            }
          }
          this.$axios(config).then(res => {
            this.$toast.clear()
            this.$toast({
              message:'提交成功',
              forbidClick: true
            })
            setTimeout(_ => {
              this.$router.push({ name:'workJournal' })
            },2000)
          }).catch(err => {
            this.$toast.clear()
            this.$toast(err.msg)
          })
        }
      },
      /**
       * 添加
       */
      addAttendance() {
        this.$bridge.callHandler('navKeepView')
        this.showAttendance = true;
      },
      /**
       * 共享人员确认按钮
       * @return {[type]} [description]
       */
      confirmChose() {
        this.$bridge.callHandler('cancelNavKeepView')
        this.attendanceId = this.$refs.sideChoose.getChoosed()
        this.attendanceValue = this.$refs.sideChoose.getChoosedByName()
        //人员去重
        let res = new Map();
        this.attendanceValue = this.attendanceValue.filter((item,index,array) => {
          return !res.has(item.id) && res.set(item.id, 1)
        })
        this.showAttendance = false
      },
      /**
       * 共享 取消按钮
       * @return {[type]} [description]
       */
      cancelAttendance() {
        this.$bridge.callHandler('cancelNavKeepView');
        this.showAttendance = false;
      },
      /**
       * 清空
       * @return {[type]} [description]
       */
      clearSign (temp) {
        this.attendanceId = []
        this.attendanceValue = []
        this.changeTemp = []
        this.showMoreSign = false
      },
      /**
       * 在线选人
       * @return {[type]} [description]
       */
      onlineChanged(e) {
        //人员去重
        let res = new Map();
        this.changeTemp = e.filter((item,index,array) => {
          return !res.has(item.id) && res.set(item.id, 1)
        })
      },
      /**
       * 删除共享人
       */
      deleteIcon(obj, index){
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: '警告',
          message: '确认删除'+ obj.name +'吗？'
        }).then(() => {
          this.$bridge.callHandler('cancelNavKeepView')
          this.attendanceValue.splice(index,1)
          this.attendanceId.splice(index,1)
        }).catch(() => {
          // on cancel
          this.$bridge.callHandler('cancelNavKeepView')
        })
        /*let config = {
          method: "",
          url:"",
          data: ""
        }
        this.$axios(config).then(res => {

        }).catch(err => {
          this.$message.error(err.msg)
        })*/
      },
      /**
       * 查看所有人
       * @return {[type]} [description]
       */
      checkAll() {
        this.$bridge.callHandler('openFullScreen',{left:'返 回',title:'共享人员',right:'继续添加'})
        this.showAll = true
      },
      /**
       * 共享人员返回
       * @return {[type]} [description]
       */
      goBack() {
        this.$bridge.callHandler('cancelFullScreen',{title:'工作日志'})
        this.showAll = false
      },
      /**
       * 继续添加按钮
       * @return {[type]} [description]
       */
      attentToAdd() {
        this.$bridge.callHandler('navKeepView')
        this.showAll = false
        this.showAttendance = true
      },
      /**
       * 显示详情
       * @return {[type]} [description]
       */
      showDetail() {
        let config = {
          method: "post",
          url: `${this.$common.basePath}attendance.php`,
          data: {
            do: 'bloga',
            id: this.editId,
          }
        }
        this.$axios(config).then(res => {
          this.active = Number(res.data.type)
          this.message = res.data.content
          if (this.active == 2) {
            this.attendanceValue = res.data.user
            if (res.data.user.length > 0) {
              this.attendanceId = this.attendanceValue.map((item,index) => {
                return item.id
              })
            }
          }
        }).catch(err => {
          console.log(err)
          this.$toast(err.msg)
        })
      },
      /**
       * 拨打电话
       * @return {[type]} [description]
       */
      phoneCall(phone) {
        this.$bridge.callHandler('makePhoneCall', { tel: phone })
      }
    }
  }
</script>
<style type="text/css" lang="less" scoped>
  p{
    margin: 0;
  }
  .nav-content {
    max-height: calc(100vh - 57px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .padding-12 {
    padding-top: 12px;
    padding-bottom:12px;
  }
  .padding-15 {
    padding-top: 15px;
    padding-bottom:15px;
  }
  .font-size14 {
    font-size: 14px;
  }
  .padding-b-57 {
    padding-bottom: 57px;
  }
  .title-nav{
    background-color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-left: 15px;
    padding-bottom: 15px;
  }
  .normal-text{
    font-size: 17px;
    color: #333333;
    margin-right: 15px;
    padding: 5px 10px;
    font-weight: bold;
  }
  .normal-text_active{
    color: #2E79FF;
    border: 1px solid #2E79FF;
    border-radius: 4px;
    background: rgba(46, 121, 255, 0.05);
  }
  .log-type{
    background-color: #fff;
    padding: 10px 15px;
    color: #999999;
    font-size: 14px;
  }
  .bg-white{
    background-color: #fff;
  }
  .flex-column{
    display: flex;
    flex-direction: column;
  }
  
  .margin-t-10{
    margin-top: 10px;
  }
  .btn-radius{
    border-radius: 5px;
  }
  .more-btn{
    color: #2E79FF;
    font-size: 14px;
  }
  .add-btn{
    width: 45px;
    height: 45px;
    background-color: #F5F5F5;
    color: #979797;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
  }
  .tag-img{
    width: 45px;
    height: 45px;
    border-radius: 4px;
  }
  .tag-text{
    font-size: 14px;
    color: #333333;
    margin: -23px 0 0 0;
    text-align: center;
  }
  .tag-class{
    padding: 0 16px 10px 16px;
  }
  .delete-icon{
    position: relative;
    top: -22px;
    left: 80%;
    z-index: 3;
    background-color: #fff;
    border-radius: 50%;
  }
  .bottom-btn {
    padding: 3px 15px;
    background-color: #fff;
    border-top: 1px solid #f5f5f5;
    width: calc(100vw - 30px);
    position: fixed;
    bottom: 0;
    z-index: 6;
  }
  .bottom-btn-side {
    padding: 3px 10px;
    background-color: #fff;
    border-top: 1px solid #f5f5f5;
    width: calc(100vw - 30px);
  }
  .default-class {
    display: flex;
    align-items: center;
    color: #1989fa;
    margin: 10px 10px;
    font-size: 17px;
  }
  .info-class{
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #2E79FF;
    border-radius: 5px!important;
    background-color: #2E79FF;
    color: #fff;
  }
  .full-container{
    height: 100vh;
  }
  .alls{
    // padding-top: 46px;

    .information{
      color: #999999;
      font-size: 14px;
      padding: 10px 15px 0 15px;
    }
  }
  .flex-base{
    display: flex;
    align-items: center;
  }
  .right-value{
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    a{
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
    }
  }
  .pop_delete-icon{
    position: relative;
    top: 13px;
    left: -10%;
    background-color: #fff;
    border-radius: 50%;
  }
  .mrgin-r-15{
    margin-left: 15px;
  }
  .custom-class{
    width: 24px;
    height: 24px;
    margin-right: 20px;
  }
  .share-classs {
    font-weight: bold;
    font-size: 17px;
    color: #333333;
    margin-right: 10px;
  }
  .label-right{
    font-size: 14px;
    color: #333333;
  }
  .dot-class {
    width: 45px;
    height: 45px;

  }
  .span-calss {
    width: 43%;
  }
  .classMoreSign {
    position: fixed;
    bottom: 50px;
    background: #fff;
    width: calc(100vw - 30px);
    padding-left: 15px;
    padding-right: 15px;
    margin-left: -15px;
    border-top: 1px solid #f5f5f5;
  }
  .more-class:after {
    content: '、'
  }
  .more-class:last-child::after{
    content: ' '
  }
</style>
<style type="text/css" lang="less">
  #addLog {

    .van-tabs__wrap {
      height: 34px;
      background-color: #fff;
      padding-bottom: 15px;
    }
    .van-tabs__nav--card {
      border: none;
      height: 100%;
    }
    .van-tab{
      max-width: 89px;
      max-height: 34px;
      color: #333333;
      font-size: 17px;
      margin-right: 15px;
    }
    .van-tab--active {
      color: #2E79FF;
      border: 1px solid #2E79FF;
      border-radius: 4px;
      background: rgba(46, 121, 255, 0.05);
    }
    .van-tabs__nav--card .van-tab.van-tab--active{
      border-right: 1px solid #2E79FF;
    }
    .van-tabs__nav--card .van-tab{
      border-right: none;
    }
    .left-class {
      font-size: 17px;
      color: #333333;
      font-weight: bold;
      padding-bottom: 10px;
    }
    .van-nav-bar {
      position: fixed;
      width: 100vw;
    }
    .van-button {
      border-radius: 4px;
    }
  }
</style>